<!-- Vue头部组件名不要用Header，当用在父组件中是写为<header>,与原生的<header>歧义 -->
<template>
	<div class="header">
		  <div class="header-left">
	  	  <span class="iconfont back-icon">&#xe624;</span> 
	    </div>
	    <div class="header-input">
	      
	      	<!-- <span>输入城市/景点/游玩主题</span>       -->
            <input type="text" placeholder="输入城市/景点/游玩主题" 
                style="width:80%;vertical-align: baseline; margin-lefg:10px;" 
                v-model="target"    
                /> 
            <span 
                class="iconfont" 
                v-on:click="query" style="float:right; margin-right:10px;">&#xe632;</span> 
	    </div>
	    <router-link to='/city'>
      		<span class="header-right">     
		        <span>{{this.city}}</span>
		        <span class="iconfont arrow-icon">&#xe64a;</span>
      		</span>
    	</router-link>
	</div>	
</template>

<script type="text/javascript">    
    export default{
        name:"home-head",
        props:['city'],
        data(){
            return {
                msg:"home head",
                target:""
            }
        },
        methods:{
            query(evt){            
                /**
                 * 自定义事件名不存在-划线到驼峰式的自动转换，作者认为事件名不会当真javascript变量或者属性名，作者不想自动转换；
                 *  又因为html不能识别大小写，即使大小也会被当做小写，myEvent当成myevent,不要联想my-event，除非你就想用个"-". 
                 */    
                this.$emit('do-query',this.target);
            }
        }            
    }  
</script>
<!--
  @import '../../assets/varibles.styl'，webpack中配置了src别名路径为@，直接依据目录结构写也是可以的
  老师在src @ 别名的基础了增加了~别名代表../../assets/style目录，我觉得没有必要
  考虑老师这种左中右结构的布局，让header-imput权重为1同时触发bfc就预留了左右浮动啦。
  
  下面这个stylus没有语法高亮，这是我这个编辑器的原因，不过我本身也不太喜欢写法，以后使用less.
-->
<style lang="stylus" scoped>

@import '~@/assets/varibles.styl'

.header
  display: flex
  line-height: 0.86rem
  background: $bgColor
  color: #fff
  .header-left
    width: .64rem
    float: left
    .back-icon
      text-align: center
      font-size: .4rem
  .header-input
    flex: 1
    height: .64rem
    line-height: .64rem
    margin-top: .12rem
    margin-left: .2rem
    padding-left: .2rem
    background: #fff
    border-radius: .1rem
    color: #ccc
  .header-right
    min-width: 1.04rem
    padding: 0 .1rem
    float: right
    text-align: center
    color: #fff
    display:inline-block
    .arrow-icon
      margin-left: -.04rem
      font-size: .24rem      
</style>
